<template>
  <div class="imgupload">
    <transition-group tag = "div" class="imgbox">
      <div class="eachimg" v-for="item in imglist" :key ="item.id" @click="imgselected($event)" @mouseleave="cancleselected($event)">
        <div class="imgedit">
          <div>
            <span class="allscreen icon-enlarge2" @click="allscreen(imglist,item.id)"></span>
            <span class="delete icon-bin" @click="dellist(item.id)"></span>
          </div>
        </div>
        <img :src="item.img" alt="">
      </div>
    </transition-group> 
    <div class="uploadbtn" @click="imgsupload($event)" @mouseleave="uploadmouseout($event)" ref="uploadbtn">
      <div>
        <span class="icon-plus"></span>
        <span>upload</span>
      </div>
    </div>
    <input type="file"
    id="imgupload"
    ref="imgupload"
    style="display:none"
    accept="image/png, image/jpeg"
    @change="fileupload" >
  </div>
</template>

<script>
import "./style.css";
import {Openscreen} from "../../lib/js/allscreen.js"
export default {
  data(){
    return{
      imglist:[
        // {
        //   id:1,
        //   img:"https://aod-image.baidu.com/5/pic/f31f099272ffe53bb6d4399b43cf6279.jpg"
        // }
      ],
      readyfilelist:[]
    }
  },
  props:['sorts','imgtitle'],//父组件传递的分类和标题名字
  methods:{
    imgselected(e){
      var ele = e.currentTarget.firstChild;
      ele.style.opacity = "0.5";
      ele.style.left = '0px';
    },
    cancleselected(e){
      var ele = e.currentTarget.firstChild;
      ele.style.opacity = "0.5";
      ele.style.left = '-300px';
    },
    imgsupload(e){
      var ele = e.currentTarget;
      ele.style.border = "1px dashed blue";
      var uploadimg = this.$refs.imgupload;
      uploadimg.click();
    },
    uploadmouseout(e){
      var ele = e.currentTarget;
      ele.style.border = "1px dashed #d9d9d9";
    },
    getBase64(file){
      return new Promise((res,rej)=>{
        var filereader = new FileReader;
        filereader.readAsDataURL(file);
        filereader.onload = ()=>res(filereader.result);
        filereader.onerror = (err)=>rej(err)
      })
    },
    fileupload(e){
      var file = e.target.files[0];
      var id = this.imglist.length +1;
      this.getBase64(file).then((data)=>{
        var obj = {
          id:id,
          img:data
        }
        this.imglist.push(obj)
        e.target.value = null;
        this.readyfilelist.push({file,id});
        this.$emit('getfilelist',this.readyfilelist);
      },(err)=>{
        console.log(err); 
      })
    },
    allscreen(list,id){//全屏按钮
      let screen = new Openscreen(list,id);
      screen.init();
    },
    dellist(id){//删除指定预备上传的图片
     let arr = this.imglist.filter((item)=>{
       if(item.id != id){
         return item;
       }
     })
    this.imglist = arr.map((item,index)=>{
      item.id = index+1
      return item;
    });
    let list = this.readyfilelist.filter((item)=>{
       if(item.id != id){
         return item;
       }
     })
    this.readyfilelist = list.map((item,index)=>{
      item.id = index+1
      return item;
    });
    this.$emit('getfilelist',this.readyfilelist);
    }
  },
  watch:{
    imglist:{
      handler(val,oldval){
        if(val.length == 5){
          this.$refs.uploadbtn.style.display = 'none';
        }else{
          this.$refs.uploadbtn.style.display = 'flex  ';
        }
        if(val.length != 0){
          var imgbox = document.querySelector(".imgbox");
          imgbox.style.display = 'flex';
        }else{
          var imgbox = document.querySelector(".imgbox");
          imgbox.style.display = 'none';
        }
      },
      deep:true
    }
  },
  mounted(){
    if(this.imglist.length !=0){
      var imgbox = document.querySelector(".imgbox");
      imgbox.style.display = 'flex';
    }
  }
}
</script>

<style lang = "less" scoped>
* { touch-action: pan-y; }
.imgupload{
  .v-enter,.v-leave-to{
    transform: translateX(50px);
    opacity: 0;
  }
  .v-enter-active,.v-leave-active{
    transition:  all  0.5s ease-in-out;
  }
  .imgbox{
    width: 100%;
    display: none;
    flex-direction: row;
    align-items: flex-end;
    height: 100px;
    img{
      width: 100%;
      height: 100%;
    }
    >div{     
      box-sizing: border-box;
      width: 17.5%;
      height: 60%;
      margin-right: 1%!important;
      border: 1px solid #d9d9d9;
      border-radius: 3px;
      padding: 2px;
      position: relative;
      overflow: hidden;
      >.imgedit{
        width: 100%;
        height: 100%;
        background: rgb(0, 0, 0);
        position: absolute;
        left: -300px;
        /* left: 0; */
        top: 0;
        opacity:0;
        transition: all 0.5s ease-in-out;
        display: flex;
        align-items: center;
        >div{
          width: 100%;
          color: white;
          font-size: 6px;
          display: flex;
          justify-content: center;
          >span:first-of-type{
            margin-right: 10%;
          }
        }
      }
    }
    >div:first-of-type{
      border: 1px dashed rgb(77, 74, 74);
      width: 25%;
      height: 100%;
    }
    >div:last-of-type{
      margin-right: 0 !important;
    }
  }
  .uploadbtn{
    transition: all 0.8s ease;
    margin-top: 5px !important;
    width: 100%;
    height: 60px;
    background-color: #f1eeee;
    display: flex;
    align-items: center;
    border: 1px dashed #d9d9d9;
    box-sizing: border-box;
    >div{
      color: gray;
      width: 100%;
      text-align: center;
      display: flex;
      flex-direction: column;
    }
  }
}
</style>